import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:math' as math;

class TestTransformWidget extends StatefulWidget {
  const TestTransformWidget({super.key});

  @override
  State<TestTransformWidget> createState() {
    return _TransformState();
  }
}

class _TransformState extends State<TestTransformWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("基础 Transform "),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.blueGrey,
              child: Padding(
                  padding: EdgeInsets.only(top: 100),
                  child: Transform(
                    alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
                    transform: Matrix4.skewY(0.3), //沿Y轴倾斜0.3弧度
                    child: Container(
                      padding: const EdgeInsets.all(8.0),
                      color: Colors.deepOrange,
                      child: const Text('Apartment for rent!'),
                    ),
                  )),
            ),
            Padding(
              padding: EdgeInsets.all(40),
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
                //默认原点为左上角，左移20像素，向上平移5像素
                child: Transform.translate(
                  offset: Offset(-20.0, -5.0),
                  child: Text("Hello world"),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(40),
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
                child: Transform.rotate(
                  //旋转90度
                  angle: math.pi / 2,
                  child: Text("Hello world"),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(40),
              child: DecoratedBox(
                  decoration: BoxDecoration(color: Colors.red),
                  child: Transform.scale(
                      scale: 1.5, //放大到1.5倍
                      child: Text("Hello world"))),
            ),
            Text(
                "RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小 "),
            Padding(
              padding: EdgeInsets.all(40),
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
                //将Transform.rotate换成RotatedBox
                child: RotatedBox(
                  quarterTurns: 1, //旋转90度(1/4圈)
                  child: Text("RotatedBox"),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
